<template>
  <div class="container">
    <div class="button-group">
      <el-button 
        type="primary" 
        icon="el-icon-play" 
        @click="isStartParamsDialogVisible = true"
        :loading="isStarting"
        :disabled="isRunning"
      >
        启动
      </el-button>
      <el-button 
        type="danger" 
        icon="el-icon-stop" 
        @click="handleEnd"
        :loading="isEnding"
        :disabled="!isRunning"
      >
        结束
      </el-button>
    </div>
    
    <el-divider></el-divider>
    
    <div class="iframe-container" v-if="isRunning">
      <iframe 
        :src="frameUrl" 
        frameborder="0" 
        class="content-iframe"
        @load="handleIframeLoad"
      ></iframe>
    </div>
    <el-empty 
      description="点击启动按钮开始操作"
      v-else
    ></el-empty>
    <!-- 启动参数 -->
    <StartParamsDialog 
      :initialParams="startParams"
      :visible.sync="isStartParamsDialogVisible"
      @submit="handleStart"
    ></StartParamsDialog>
  </div>
</template>

<script>
import axios from 'axios'
import StartParamsDialog from './components/startParamsDialog.vue'
import { appApi } from '@/api/index'
export default {
  name: 'StartEndFrame',
  components: {
    StartParamsDialog
  },
  data() {
    return {
      // 状态控制
      isRunning: false,
      isStarting: false,
      isEnding: false,
      isStartParamsDialogVisible: false,
      // iframe地址
      frameUrl: '',
      // 保存启动后返回的标识
      task_uuid: null
    }
  },
  created() {
    this.startParams=config.startParams
  },
  methods: {
    /**
     * 处理启动操作
     */
    async handleStart(startParams) {
      this.isStarting = true
      try {
        // 调用启动接口
        const response = await appApi.taskStart(startParams)
        console.log('启动接口返回:', response)
        // 假设接口返回格式 { code: 200, data: { url: 'xxx', sessionId: 'xxx' } }
        if (response.code === 0) {
          this.task_uuid = response.data.task_uuid
          this.frameUrl = config.displayUrl;
          this.isRunning = true
          this.$message.success('启动成功')
        } else {
          this.$message.error(response.data.message || '启动失败')
        }
      } catch (error) {
        console.error('启动接口调用失败:', error)
       // this.$message.error('启动失败，请重试')
      } finally {
        this.isStarting = false
      }
    },
    
    /**
     * 处理结束操作
     */
    async handleEnd() {
      this.isEnding = true
      try {
        // 调用结束接口
        const response = await appApi.taskStop({
          task_uuid: this.task_uuid
        })
        
        if (response.code === 0) {
          this.isRunning = false
          this.frameUrl = ''
          this.sessionId = null
          this.$message.success('已结束')
        } else {
          this.$message.error(response.message || '结束失败')
        }
      } catch (error) {
        console.error('结束接口调用失败:', error)
        this.$message.error('结束失败，请重试')
      } finally {
        this.isEnding = false
      }
    },
    
    /**
     * iframe加载完成处理
     */
    handleIframeLoad() {
      //this.$message.info('页面加载完成')
    }
  }
}
</script>

<style scoped>
body {
  overflow: hidden;
}
.container {
  padding: 12px;
}

.button-group {
  margin-bottom: 8px;
}

.button-group /deep/ .el-button {
  margin-right: 10px;
}

.iframe-container {
  width: 100%;
  height: 600px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  overflow: hidden;
}

.content-iframe {
  width: 100%;
  height: 100%;
}
</style>
